<template>
	<view class="content poRel">
		<view class="wid100 bacFFF">
			<view class="wid90 mar dis disAl" style="height: 80rpx;">
				<view class="wid25 dis disAl disJuC">
					<view class="borRad40 dis disAl disJuC foSi20 fowe800" @click="tiaozhuan('/pages/agent/technicianAdd')"
					 style="width: 120rpx;height: 50rpx;" :style="'border: 1rpx solid '+theme.main_color+';color: '+theme.main_color+';'">+ 添加</view>
				</view>
				<view class="mar dis disAl disJuC borRad40 hei60"style="background: #E5E5E5;width: 75%;">
					<view class="dis disJuC" style="width: 13%;">
						<uni-icons type="search" size="30rpx" color="#838383"></uni-icons>
					</view>
					<input class="wid85 foSi20" v-model="sousuo" @input="sousuoInput" 
						placeholder="请输入技师姓名/手机号" placeholder-style="color: #838383;"/>
				</view>
			</view>
			<view class="wid87 mar dis disJuB hei86 foSi25 fowe800 ">
				<view class="dis disAl hei80" @click="xuanClick(0)"
					:style="xuan == 0?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
					全部</view>
				<view class="dis disAl hei80" @click="xuanClick(1)"
					:style="xuan == 1?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
					申请中</view>
				<view class="dis disAl hei80" @click="xuanClick(2)"
					:style="xuan == 2?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
					已授权</view>
				<view class="dis disAl hei80" @click="xuanClick(3)"
					:style="xuan == 3?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
					已驳回</view>
				<view class="dis disAl hei80" @click="xuanClick(4)"
					:style="xuan == 4?'border-bottom: 6rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 6rpx solid #fff;color: #585858;'">
					重新审核</view>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 196rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35">
				<view style="height: 50rpx;"></view>
				<view class="dis disJuC">
					<image src="../../static/zanwu2.png" style="width: 400rpx;height: 300rpx;"></image>
				</view>
				<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="mar-top30 wid90 mar bacFFF borRad20" style="padding: 25rpx 0;">
					<view class="wid90 mar">
						<view class="dis">
							<view class="wid20" style="height: 100rpx;">
								<image :src="item.coverimg" style="width: 100rpx;" class="hei100 borRad50"></image>
							</view>
							<view style="width: 75%;border-bottom: 1rpx solid #E1DFDF;height: 99rpx;">
								<view class="dis disAl disJuB foSi20" style="color: #737373;height: 46rpx;">
									<view>ID：{{item.id}}</view>
									<view class="fowe600" v-if="item.empower == 1">已授权</view>
									<view class="fowe600" v-if="item.empower == 0">未授权</view>
									<view class="fowe600" v-if="item.empower == 2">取消授权</view>
								</view>
								<view class="foSi30 fowe600" style="line-height: 40rpx;">{{item.name}}</view>
							</view>
						</view>
						<view class="dis mar-top20">
							<view class="wid20">
								<view class="borRad40 dis disAl disJuC foSi15 coFFF mar-left10" :style="'background-color: '+theme.main_color+';'"
									style="width: 80rpx;height: 30rpx;">{{item.auth_status == 2 ? '已认证' : item.auth_status == 1 ? '申请中' : '未认证'}}</view>
							</view>
							<view class="foSi20" style="width: 75%;color: #737373;">
								<view>{{item.phone}}</view>
								<view class="mar-top10">所属代理商：{{item.agent_name}}（{{item.cityname}}）</view>
								<view class="mar-top10">申请时间：{{item.createtime}}</view>
								<view class="dis mar-top10" style="justify-content: flex-end;">
									<view class="dis disAl disJuC borRad40 fowe800" style="width: 100rpx;height: 45rpx;"
									:style="'border: 1rpx solid '+theme.main_color+';color: '+theme.main_color+';'" @click="updata(index)">编辑</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				xuan: 0,
				ty: 0,
				timer: null,
				sousuo: '',
				last_page: 0,
				page: 1,
				list: [],
				theme: null
			}
		},
		onLoad(option) {
			this.theme = uni.getStorageSync('theme')
			this.getList()
		},
		methods: {
			updata(index){
				uni.navigateTo({
					url:'/pages/agent/technicianAdd?tech_id='+this.list[index]['id']
				})
			},
			xuanClick(index){
				if(this.xuan != index){
					this.xuan = index
					this.page = 1
					this.list = []
					this.getList()
				}
			},
			sousuoInput: function(event) {
				var that = this
				if (that.timer !== null) clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					that.sousuo = event.target.value
					that.page = 1
					that.list = []
					that.getList()
					console.log(that.sousuo)
				}, 1000)
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			getList(){
				let that = this
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/agent/techlist',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						agent_id: uni.getStorageSync('agent_id'),
						service_status: that.xuan,
						keyword: that.sousuo,
						page:that.page
				
					},
					success(res) {
						let result = res.data
						console.log(result.data)
						if (result.code == 1) {
							// that.agent_info = result.data
							that.list = that.list.concat(result.data.data)
							that.last_page = result.data.last_page
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}
	.xia{
		height: 1rpx;
		background-color: #E5E5E5;
	}
	.butt1{
		width: 120rpx;
		height: 40rpx;
		color: #414040;
		border: 1rpx solid #414141;
		border-radius: 8rpx;
	}
	.butt2{
		width: 120rpx;
		height: 40rpx;
		background-color: #00AD27;
		border: 1rpx solid #00AD27;
		border-radius: 8rpx;
	}
</style>